<template>
  <div class="comment-list" v-if="comments.length">
    <div class="title">
      评论
    </div>
    <ul class="comments">
      <li class="comment" v-for="comment in comments" :key="comment._id">
          <div class="top flex-row">
            <div class="user">
              <img class="avatar" :src="comment._from.avatarUrl" mode="aspectFit" alt="">
              {{comment._from.nickName}}
            </div>

            <div class="location">
              {{comment.location}}
              <span class="text-primary">
                --
              </span>
              {{comment.phone}}
            </div>
          </div>

          <div class="bottom">
            {{comment.comment}}
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array,
      default () {
        return {}
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .comment-list
    background #cccccc
    font-size 14px
    .title
      padding-left 10px
      background-color #eeeeee
      line-height 30px
      font-size 16px
    .comment
      margin-bottom 1px
      padding 10px 8px
      background #ffffff
      .user
        .avatar
          width 15px
          height 15px
          border-radius 50%
</style>
